'use client'

import { Employee } from "@prisma/client"
import { useState } from "react"
import { EditEmployeeDialog } from "./edit-employee-dialog"
import { PencilIcon, TrashIcon } from "@heroicons/react/24/outline"
import { deleteEmployee } from "@/actions/employee"

interface EmployeeItemProps {
  employee: Employee
}

export function EmployeeItem({ employee }: EmployeeItemProps) {
  const [isEditOpen, setIsEditOpen] = useState(false)

  const handleDelete = async () => {
    if (confirm('确定要删除该员工吗？')) {
      try {
        await deleteEmployee(employee.id)
      } catch (error) {
        console.error('删除员工失败:', error)
      }
    }
  }

  return (
    <>
      <tr>
        <td className="px-6 py-4 whitespace-nowrap">
          <div className="text-sm font-medium text-gray-900">{employee.name}</div>
        </td>
        <td className="px-6 py-4 whitespace-nowrap">
          <div className="text-sm text-gray-900">{employee.phone}</div>
        </td>
        <td className="px-6 py-4 whitespace-nowrap">
          <div className="text-sm text-gray-900">{employee.department}</div>
        </td>
        <td className="px-6 py-4 whitespace-nowrap">
          <div className="text-sm text-gray-900">{employee.position}</div>
        </td>
        <td className="px-6 py-4 whitespace-nowrap">
          <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
            employee.status
              ? 'bg-green-100 text-green-800'
              : 'bg-red-100 text-red-800'
          }`}>
            {employee.status ? '在职' : '离职'}
          </span>
        </td>
        <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
          <button
            onClick={() => setIsEditOpen(true)}
            className="text-indigo-600 hover:text-indigo-900 mr-4"
          >
            <PencilIcon className="h-5 w-5" />
          </button>
          <button
            onClick={handleDelete}
            className="text-red-600 hover:text-red-900"
          >
            <TrashIcon className="h-5 w-5" />
          </button>
        </td>
      </tr>
      <EditEmployeeDialog
        employee={employee}
        open={isEditOpen}
        onClose={() => setIsEditOpen(false)}
      />
    </>
  )
} 